import * as React from 'react';
import Header from '@/commonComponents/header/Header';
// import useAuth from '@/utils/hooks/useAuth';
import Bottom from '@/commonComponents/bottom/index';
import OrderItem from './compontents/OrderItem';
import { Tabs, PullToRefresh, InfiniteScroll, Empty } from 'antd-mobile';
import './index.module.scss';
import { fetchOrderList } from './indexApi';
import { useNavigate } from 'react-router-dom';
import { sleep } from 'antd-mobile/es/utils/sleep';
import NoLogin from '@/commonComponents/noLogin';
// import type { OrderListItemProps } from './types';
import './index.module.scss';
import { getToken } from '@/utils/localStorge';
const { memo, useState } = React;
// const count = 0;
function OrderListComp() {
  //1已完成2待支付3已退款4已取消
  const tabsItemList = [
    { title: '全部', key: 0 },
    { title: '待出行', key: 1 },
    { title: '待支付', key: 2 },
    { title: '退款/已取消', key: 3 },
  ];
  const [hasMore, setHasMore] = useState(true);
  const [orderList, setOrderList] = useState<any[]>([]);
  const [status, setStatus] = useState<number>(0);
  const [count, setCount] = useState(0);
  const getOrderList = (val: number, count: number) => {
    fetchOrderList({ status: val, count: count }).then((res: any) => {
      setOrderList(res.data.data);
      setCount(1);
      setHasMore(Number(res.data.data.length) === 7);
      localStorage.setItem('orderList', JSON.stringify(res.data.data));
    });
  };
  // 回上一页
  const navigate = useNavigate();
  const onBack = () => {
    navigate(-1);
  };
  const onRefresh = async () => {
    setCount(0);
    setOrderList([]);
    await sleep(1000);
    getOrderList(status, 0);
    setHasMore(false);
  };
  const toDeleteOrder = (val: number) => {
    setOrderList(orderList.filter((item) => item.id !== val));
  };
  const loadMore = async () => {
    await sleep(1000);
    if (orderList.length < 12) {
      fetchOrderList({ status, count }).then((res: any) => {
        setCount(count + 1);
        setOrderList([...orderList, ...res.data.data]);
        setHasMore(Number(res.data.data.length) === 7);
      });
    } else {
      setHasMore(false);
    }
  };
  return (
    <div styleName="orderlist-box">
      <Header
        title={`全部订单`}
        onBack={onBack}
        style={{
          background: '#fff',
          color: '#333',
        }}
        type={1}
      />
      <div styleName="tab_detail">
        {getToken() ? (
          <Tabs
            onChange={(key: string) => {
              setStatus(Number(key));
              setCount(0);
              setOrderList([]);
              getOrderList(Number(key), 0);
            }}
          >
            {tabsItemList.map((item) => (
              <Tabs.Tab
                title={item.title}
                key={item.key}
                styleName="tabs-style"
              >
                <PullToRefresh onRefresh={async () => onRefresh()}>
                  {orderList.length !== 0 ? (
                    <OrderItem
                      toDeleteOrder={toDeleteOrder}
                      orderList={orderList}
                    />
                  ) : (
                    <Empty
                      style={{ padding: '64px 0' }}
                      imageStyle={{ width: 128 }}
                      description="暂无数据"
                    />
                  )}
                  <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                </PullToRefresh>
              </Tabs.Tab>
            ))}
          </Tabs>
        ) : (
          <NoLogin></NoLogin>
        )}
      </div>
      <Bottom />
    </div>
  );
}

export default memo(OrderListComp);
